<template>
    <div class="mui-content enterpriseList mgb2 mui-scroll-wrapselectNextper">
        <div class="mui-scroll">
            <div class="slwy-panel mgt1 enterprise-list-con">
                <div class="panel-content">
                    <form class="mui-input-group new-user">
                        <div class="mui-input-row">
                            <label><span class=" mui-icon mui-icon-person "></span></label>
                            <input type="text" id="userName" maxlength="15" class="mui-input-clear pat-10" placeholder="请输入用户名" v-model="userName" >
                            <div class="sex-box">
                                <span @click="selectSex()" id="select-sex"class="text2 fl" v-if="userSex==1">先生</span>
                                <span @click="selectSex()" id="select-sex"class="text2 fl" v-if="userSex==2">女士</span>
                                <span class="mui-icon mui-icon-arrowright"></span>
                            </div>
                        </div>
                        <div class="mui-input-row">
                            <label><span class=" mui-icon mui-icon-phone"></span></label>
                            <input type="tel" id="userPhone" class="mui-input-clear pat-10" placeholder="请输入联系方式"  pattern="[0-9]*" maxlength="11" oninput="if(value.length>11)value=value.slice(0,11)" v-model="userPhone" >
                        </div>
                        <div class="mui-input-row">
                            <div class="location-box">
                                <span class="text1-size color2 mui-icon mui-icon-location"></span>
                                <span><a href="javascript:;" @click="getLocation()">获取当前位置</a></span>
                            </div>
                        </div>
                        <div class="mui-input-row">
                            <div class="address-box">
                                <input id="addressBox" type="text" class="mui-input-clear wid-100" maxlength="40" placeholder="请输入联系地址" v-model="userAddress" >
                            </div>
                        </div>
                        <div class="fixedOperate">
                            <button class="mui-btn mui-btn-primary" @click="orderCheck($event)">确定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    /*定位地址*/
    .fromCity {padding: 0.2rem .3rem; height: auto; border-bottom: 1px solid #e2e2e2; font-size: .26rem; color: #666; vertical-align: middle;}
    .fromCity > span { display: inline-block; vertical-align: middle;}
    .enterpriseList .fromCity{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .enterpriseList .fromCity .fromCityTitle {width: 1rem !important; display: inline-block;}
    .enterpriseList .fromCity .fromCityMain {-webkit-box-flex: 1; -ms-box-flex: 1; -moz-box-flex: 1;}
    .enterpriseList .enterpriseListWrap{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .enterpriseList .enterpriseListWrap .enterpriseLeft {-webkit-box-flex: 1; -ms-box-flex: 1; -moz-box-flex: 1; padding-right: 0.1em;}
    .enterpriseList .attrText {width: 1.5rem !important; font-size: .28rem;  padding: 0.05rem 0.1rem;}
    .enterpriseList .distance {border: 1px solid #ff8317; color: #ff8317;}
    .enterpriseList .evaluate {border: 1px solid #2f77e3; color: #2f77e3;}
    .enterprise-list-con{margin-bottom:1.1rem!important;}
    .new-user .mui-input-row label{width: 15%;padding-top: 8px;}
    .new-user .mui-input-row input{width: 65%;padding-top: 3px;float: left;}
    .location-box{padding-top: 10px;padding-left: 10px;}
    .address-box{padding-left: 10px;}
    .sex-box{margin-top: 10px; }
    .pat-10{padding-top: 10px!important; }
    .wid-100{width: 100%!important;}
</style>
<script type="text/ecmascript-6">
    import footerNavComponent from '../../components/footer-nav/footer-nav.vue';
    import {API} from '../../config/constants'
    import Page from '../../base/Page'
    import wechat from '../../libs/wechat'
    import datePicker from '../../components/date-picker/date-picker.vue'
    import picker from '../../components/picker/picker.vue'
    export default new Page({
        data(){
            return {
                list: [],
                currentLocation:"",
                fromPage:"",
                userName:"",
                userSex:1,
                person:[],
                userPhone:"",
                userAddress:"",
                showFooter:"true"
            }
        },
        ready() {
            mui('.mui-scroll-wrapper').scroll({
                indicators: true, //是否显示滚动条
                deceleration : 0.0005,
            });
            this.getJSON(API.GET_CONTACT_DETAIL, {}, res => {
                    console.log(res);
                    this.person = res.resultData;
                    this.userName = res.resultData.contactName;
                    this.userPhone = res.resultData.contactPhone;
                    this.userAddress = res.resultData.contactAdress;
                    if(res.resultData.contactSex=='女'){
                       this.userSex = 2 ;
                    }
            });

        },
        methods: {

            //选择
            selectSex:function() {
                let that = this;
                var picker = new mui.PopPicker();
                    picker.setData([{
                        value: "male",
                        text: "先生"
                    }, {
                        value: "female",
                        text: "女士"
                    }])
                    picker.pickers[0].setSelectedValue('male', 0);
                    var tc=document.getElementById('select-sex');
                    picker.show(function(items) {
                            tc.innerText = items[0].text;
                            if(items[0].value=="male"){
                                that.userSex = 1 ;
                            }else{
                                that.userSex = 2 ;
                            }

                        }, false);
            },
            getLocation:function(){
                 //GPS定位处理
                 setTimeout(()=>{
                     wechat.getAddress((address, location) => {
                         this.userAddress = address;
                     },300);
                 })

                },
            orderCheck:function(e){
                let that =this;
                e.preventDefault();
                let numbers = /^1[34578]\d{9}$/;
                let people = /[\u4e00-\u9fa5_a-zA-Z0-9_]{2,20}/;
                let val = this.userPhone.replace(/\s+/g,"");
                this.userName = this.userName.replace(/\s*/g,'');
                this.userAddress = this.userAddress.replace(/\s*/g,'');
                if (this.userName==""|| this.userPhone==""|| this.userAddress=="" ) {
                    mui.toast('请填写完整信息',{ duration:'short', type:'div' });
                    return;
                }else if(!numbers.test(val) ){
                    mui.toast('请填写正确的手机号');
                    return false;
                }else if(!people.test(userName) ){
                    mui.toast('姓名不能包含特殊字符');
                    return false;
                }else{
                    console.log(this.userName);
                    console.log(this.userAddress);
                    this.post(API.POST_ORDER_NEWCONTACT, {
                        contactName:this.userName,
                        contactPhone:this.userPhone,
                        contactAdress:this.userAddress,
                        contactSex:this.userSex
                        }, res => {
                         this.$route.router.go('/maintenance/maintenanceOrderConfirm')
                    });
                }
            }
        },
        components: {
            footerNavComponent
        }
    });

</script>
